{[{ define "admin/nav.html" }]}
<!DOCTYPE html>
<html lang="en">
<head>
    {[{template "admin/headerbody" .}]}
</head>
<body>
<div id="app">

    {[{template "admin/header" .}]}

    <div class="container grid-lg indexcontent">

        <div class="columns">
            <div class="column col-3 col-md-1">{[{template "admin/menu" .}]}</div>
            <div class="column col-9 col-md-12 adminblog">
                <input type="button" value="新增" class="btn btn-primary" onclick="add()">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th style="width: 50px">序号</th>
                        <th>名称</th>
                        <th>链接</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in data" :class="{active:index%2==0,off:index%2!=0}">
                        <td>{{(pager.page-1)*pager.pageSize+index+1}}</td>
                        <td>{{item.navname}}</td>
                        <td style="width: 180px">{{item.link}}</td>
                        <td style="width: 120px">
                            <button class="btn btn-link" @click="Edit(item.navid)">编辑</button>
                            <button class="btn btn-link" @click="ShowEdit(item.navid)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div class="card-footer" style="padding: 0px">
                    <zpagenav v-bind:page="pager.page" v-bind:page-size="pager.pageSize" v-bind:total="pager.total"
                              v-bind:max-page="pager.maxPage" v-on:pagehandler="pageHandler">
                    </zpagenav>
                </div>
            </div>

        </div>
    </div>


    <div class="modal active modal-sm" id="modal-id" v-if="ShowTips">
        <a href="#close" class="modal-overlay" aria-label="Close" @click="ShowTips=false"></a>
        <div class="modal-container">
            <div class="modal-header">
                <a href="#close" class="btn btn-clear float-right" aria-label="Close" @click="ShowTips=false"></a>
                <div class="modal-title h5">是否删除</div>
            </div>
            <div class="modal-body">
                <div class="content">
                    <button class="btn btn-success" @click="Delete()">是</button>
                    <button class="btn btn-error" @click="ShowTips=false">否</button>
                </div>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>

    {[{template "admin/footer" .}]}
</div>


<script>
    function add() {
        window.location.href = "navedit";
    }
</script>

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                data: [{
                    navid: 0,
                    navcode: "",
                    navname: "",
                    link: "",
                    target: "",
                    navorder: 99
                }],
                message: "",
                pager: {
                    page: 1,  //显示的是哪一页
                    pageSize: 10, //每一页显示的数据条数
                    total: 0, //记录总数
                    maxPage: 10000  //最大页数
                },
                thisid: "",
                ShowTips: false
            }
        },
        mounted() {
            this.GetCount("");
            this.Load(1);
        },
        methods: {
            //获取文章
            Load: function (pageindex) {
                var that = this;
                var date = new Date();
                var sss = date.toLocaleString();
                //发送get请求
                axios.get('../api/v1/nav/list?pageindex=' + pageindex + "&rnd=" + sss).then(function (res) {
                    if (res.data) {
                        if (res.data.status == 200) {
                            that.data = res.data.data;
                        } else {
                            that.message = res.data.message;
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },
            //总数
            //获取地块下的界址点总数
            GetCount: function (keystring) {
                var that = this;
                var url = "../api/v1/nav/count?keystring=" + keystring;
                axios.get(url).then(function (res) {
                    if (res.data) {
                        if (res.data.status == 200) {
                            that.pager.total = res.data.data;
                        } else {
                            if (res.data.message) {
                                that.message = res.data.message;
                            }
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            pageHandler: function (page) {
                this.pager.page = page;
                this.Load(page);
            },
            Edit: function (id) {
                window.location.href = "navedit?navid=" + id;
            },
            ShowEdit: function (id) {
                this.thisid = id;
                this.ShowTips = true;
            },
            Delete: function () {

                this.ShowTips = false;
                var that = this;
                var url = "../api/v1/nav/delete?navid=" + this.thisid;
                axios.post(url).then(function (res) {
                    if (res.data) {
                        if (res.data.status == 200) {
                            that.GetCount("");
                            that.Load(that.pager.page);
                        } else {
                            if (res.data.message) {
                                that.message = res.data.message;
                            }
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    });
</script>
</body>
</html>

{[{end}]}